<template>
  <div>
    <el-dialog
      title="添加请假"
      :visible.sync="leaveDialogVisible"
      :close-on-click-modal="false"
      :before-close="close"
      width="400px"
    >
      <el-form
        :model="leaveForm"
        ref="leaveForm"
        :rules="rules"
        label-position:left
      >
        <el-form-item label="请假学生" prop="name">
          <el-input v-model="leaveForm.name"></el-input>
        </el-form-item>
        <el-form-item label="审核人" prop="askFor">
          <el-select v-model="leaveForm.askFor" placeholder="请选择审核人" style="margin-left:14px">
            <el-option
              v-for="item in askForOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="leaveForm.startTime"
            type="datetime"
            placeholder="选择日期时间"
            :picker-options="startPickerOption"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="leaveForm.endTime"
            type="datetime"
            placeholder="选择日期时间"
            :picker-options="endPickerOption"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="请假理由" prop="reason">
          <el-input v-model="leaveForm.reason"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="addLeave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import leave from "@/api/leave/leave";
import system from "@/api/system/system";
export default {
  props: ["leaveDialogVisible", "leaveForm"],
  name: "leaveDialog",
  data() {
    return {
      startPickerOption: this.beginTime(),
      endPickerOption: this.endTime(),
      rules: {
        name: [
          { required: true, message: "请输入学生姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 20 个字符", trigger: "blur" },
        ],
        askFor: [
          { required: true, message: "请选择审核人", trigger: "change" },
        ],
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
        reason: [
          { required: true, message: "请填写请假理由", trigger: "change" },
        ],
      },
      askForOptions: [],
    };
  },
  created() {
    this.getAdmins()
  },
  methods: {
    //开始时间>当前时间
    beginTime() {
      return {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      };
    },
    //结束时间>开始时间
    //开始时间不选时，结束时间最大值小于等于当天
    endTime() {
      let self = this;
      return {
        disabledDate(time) {
          if (self.leaveForm.startTime) {
            return (
              new Date(self.leaveForm.startTime).getTime() > time.getTime()
            );
          } else {
            return time.getTime() < Date.now();
          }
        },
      };
    },
    //获取管理员
    getAdmins() {
      system
        .getAdmins()
        .then((res) => {
          this.askForOptions = res.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //添加请假
    addLeave() {
      this.$refs["leaveForm"].validate((validate) => {
        if (validate) {
          console.log(this.leaveForm);
          leave
            .addLeave(this.leaveForm)
            .then((res) => {
              this.$message.success("添加成功");
              this.$parent.getLeaveList();
              this.close();
            })
            .catch((e) => {
              this.$message.error("添加失败");
            });
        } else {
          this.$message.error("请正确填写信息");
        }
      });
    },
    //关闭dialog
    close() {
      this.$refs['leaveForm'].resetFields();
      this.$parent.closeDialog();
    },
  },
};
</script>

<style>
</style>